<!DOCTYPE html>
<html>
<head>
    <title>货位管理</title>
		<#include "/header.html">
</head>
<body>
<div id="rrapp" v-cloak>
    <div v-show="showList">
       <!-- <div class="grid-btn">
			&lt;!&ndash;<#if shiro.hasPermission("basics:bgoodsallocation:save")>
            <a class="btn btn-primary" @click="add"><i class="fa fa-plus"></i>&nbsp;新增</a>
			</#if>
			<#if shiro.hasPermission("basics:bgoodsallocation:info")>
            <a class="btn btn-primary" @click="detail"><i class="fa fa-plus"></i>&nbsp;查看</a>
			</#if>
			<#if shiro.hasPermission("basics:bgoodsallocation:update")>
            <a class="btn btn-primary" @click="update"><i class="fa fa-pencil-square-o"></i>&nbsp;修改</a>
			</#if>
			<#if shiro.hasPermission("basics:bgoodsallocation:delete")>
            <a class="btn btn-primary" @click="del"><i class="fa fa-trash-o"></i>&nbsp;删除</a>
			</#if>&ndash;&gt;
        </div>
        <table id="jqGrid"></table>
        <div id="jqGridPager"></div>-->
        <div class="layui-row">
            <div class="layui-col-xs12" style="margin-bottom:10px">
            <!--<i-col span="24" style="margin-bottom:10px">-->
               <!-- <i-col span="2" style="padding: 10px">-->
                <div class="layui-col-xs2" style="padding: 10px">
                    <span>所属货区：</span>
                    <el-select v-model="search.goodsAreaId" placeholder="请选择" @change="selectChange" >
                        <el-option
                                v-for="item in goodsAreaList"
                                :key="item.id"
                                :label="item.areaName"
                                :value="item.id">
                        </el-option>
                    </el-select>
                </div>
                <div class="layui-col-xs2" style="padding: 10px">
                    <span>所属货架：</span>
                    <el-select v-model="search.goodsShelveId" placeholder="请选择" @change="selectChangeTwo" >
                        <el-option
                                v-for="item in goodsShelveList"
                                :key="item.id"
                                :label="item.shelveName"
                                :value="item.id">
                        </el-option>
                    </el-select>
                </div>
            </div>
            <div class="layui-col-xs12" style="margin-bottom:10px;">
                <#if shiro.hasPermission("basics:bgoodsallocation:info")>
                    <a class="btn btn-primary" @click="detail"><i class="fa fa-plus"></i>&nbsp;查看</a>
                 </#if>
                <#if shiro.hasPermission("basics:bgoodsallocation:update")>
                     <a class="btn btn-primary" @click="update"><i class="fa fa-pencil-square-o"></i>&nbsp;修改</a>
                </#if>
                    <a class="btn btn-primary" @click="print"><i class="fa fa-trash-o"></i>&nbsp;打印</a>
            </div>
            <div class="layui-col-xs12">
                <table id="jqGrid"></table>
                <div id="jqGridPager">
            </div>
        </div>

        <div>
        <div class="layui-row" style="margin-top: 10px">
            <div class="layui-col-xs6">
            <Card >
                <p slot="title">
                    <Icon type="ios-film-outline"></Icon>
                    {{search.goodsAreaName}} - {{search.goodsShelveName}}
                </p>
                <div class="f-rili-table" >

                    <div class="f-rili-head celarfix" v-for="(item,ind) in goodsShelve.specsRow" v-if="search.goodsShelveId !='' && search.goodsAreaId !=''" >
                        <div class="f-td" v-for="(item,index) in goodsShelve.specsCol" :style="divWidth(ind,index)" @click="getAllocationObj(ind,index)"  >
                            <div class="subscript" v-if="goodsAllocation[ind*goodsShelve.specsCol +index].id==goodsAllocationObj.id">
                            </div>
                            <span >
                                {{goodsAllocation[ind*goodsShelve.specsCol +index]== undefined ?'':goodsAllocation[ind*goodsShelve.specsCol +index].isUsed ==1?'无货':goodsAllocation[ind*goodsShelve.specsCol +index].isUsed==2?'有货':goodsAllocation[ind*goodsShelve.specsCol +index].isUsed==3?'故障':'锁定'}}
                            </span>
                        </div>
                    </div>
                </div>

            </Card>
            </div>
            <div class="layui-col-xs5"  offset="1" style="margin-left: 10px">
           <!-- <i-col span="11" offset="1">-->
            <Card >
                <p slot="title">
                    <Icon type="ios-film-outline"></Icon>
                    {{goodsAllocationObj.allocationName}}
                </p>
                <div style="height: 600px">
                    <Card style="width: 100px;height: 100px;float: left" v-for="item in goodsList" >
                        <div style="text-align:center">
                            <div><img :src="item.goodsPic" style="width: 60%"></div>
                            <div><span>{{item.goodsName}}</span></div>
                        </div>
                    </Card>
                </div>
            </Card>
            </div>
        </div>
        </div>
        </div>
    </div>

    <div v-show="!showList" class="panel panel-default">
        <div class="panel-heading">{{title}}</div>
        <form class="form-horizontal">
					<div class="form-group">
                        <div class="col-sm-2 control-label">货位编码</div>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" readonly v-model="bGoodsAllocation.allocationCode" placeholder="货位编码"/>
                        </div>
                    </div>
					<div class="form-group">
                        <div class="col-sm-2 control-label">货位名称</div>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" readonly v-model="bGoodsAllocation.allocationName" placeholder="货位名称"/>
                        </div>
                    </div>
					<div class="form-group">
                        <div class="col-sm-2 control-label">货架名称</div>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" readonly v-model="bGoodsAllocation.shelveName" placeholder="货架名称"/>
                        </div>
                    </div>
					<div class="form-group">
                        <div class="col-sm-2 control-label">条形码</div>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" readonly v-model="bGoodsAllocation.barCode" placeholder="条形码"/>
                        </div>
                    </div>
					<div class="form-group">
                        <div class="col-sm-2 control-label">货架行</div>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" readonly v-model="bGoodsAllocation.goodsShelveRow" placeholder="货架行"/>
                        </div>
                    </div>
					<div class="form-group">
                        <div class="col-sm-2 control-label">货架列</div>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" readonly v-model="bGoodsAllocation.goodsShelveCol" placeholder="货架列"/>
                        </div>
                    </div>
					<div class="form-group">
                        <div class="col-sm-2 control-label">状态</div>
                        <div class="col-sm-10">
                            <el-select v-model="bGoodsAllocation.isUsed">
                                <el-option  value="1" key="1" label="无货">无货</el-option>
                                <el-option  value="2" key="2" label="有货">有货</el-option>
                                <el-option  value="3" key="3" label="故障">故障</el-option>
                                <el-option  value="4" key="4" label="锁定">锁定</el-option>
                            </el-select>
                        </div>
                    </div>
			<div class="form-group">
                <div class="col-sm-2 control-label"></div>
                <input type="button" class="btn btn-primary" @click="saveOrUpdate" v-if="title!='详情'" value="确定"/>
                &nbsp;&nbsp;<input type="button" class="btn btn-warning" @click="reload" value="返回"/>
            </div>
        </form>
    </div>
    <div  v-show="false"><!--v-show="false"-->
        <div id="print">
        <table>
            <tr>
                <th colspan="2">
                    <div><svg id="barcode1"></svg></div>
                </th>

            </tr>
            <tr>
                <th>
                    <div>
                        <span> 所属货架：</span>
                    </div>
                </th>
                <td>
                    <div>
                        <p id="shelveName"></p>
                    </div>
                </td>
            </tr>
            <tr>

                <th>
                    <div>
                        <span> 行：</span>
                    </div>
                </th>
                <td>
                    <div>
                        <p id="goodsShelveRow"> </p>
                    </div>
                </td>
            </tr>
            <tr>
                <th>
                    <div>
                        <span> 列：</span>
                    </div>
                </th>
                <td>
                    <div>
                        <p id="goodsShelveCol"></p>
                    </div>
                </td>
            </tr>
        </table>
    </div>
    </div>
</div>

<script src="${request.contextPath}/statics/js/modules/basics/bgoodsallocation.js?_${.now?long}"></script>
</body>
<style>
    .f-btn-fhby{height: 30px;line-height: 30px;color: #f77b10;border: 1px solid #f77b10;font-size: 14px;display: block;width: 85px;text-align: center;border-radius: 4px;cursor: pointer;margin-top: 10px;margin-left: 20px;}
    .f-btn-jian{height: 30px;line-height: 30px; border: 1px solid #ccc;border-right: 0px;margin-top:10px;text-align: center;width: 20px;background: #ececec;color: #666;border-radius: 4px;position: relative;left: 2px;cursor: pointer;}
    .f-btn-jia{height: 30px;line-height: 30px;border: 1px solid #ccc;border-left: 0px;margin-top:10px;text-align: center;width: 20px;background: #ececec;color: #666;border-radius: 4px;position: relative;left: -2px;cursor: pointer;}
    .f-riqi{width: 110px;padding: 0 10px; background: #fff;color: #666;font-size: 14px;border-top: 1px solid #ccc;border-bottom: 1px solid #ccc;text-align: center;height: 30px;line-height: 30px;margin-top: 10px;display: block;}
    .f-rili-table tbody td{background: #fff; }
    .f-rili-table tbody tr{border-bottom: 1px dashed #ccc;}
    .f-rili-table .f-today{background-color: #faf1de;}
    .f-rili-table .f-on{background-color:cornflowerblue;color: #fff;}
    .f-rili-table{width: 100%;height:600px;}
    .f-td{float: left;
        width: 14.25%;
        text-align: center;
        height:46px;
        line-height: 46px;
        position: relative;
        border: 1px solid #9e9e9e66;
        background-color: #9e9e9e66;
        margin-left: 10px;
        margin-bottom: 10px;
    }
    .subscript{
        color: #fff;
        height: 10px;
        width: 27px;
        position: absolute;
        right: -7px;
        text-align: center;
        background-color: #fff;
        -moz-transform:rotate(45deg);
        -webkit-transform:rotate(45deg);
        -o-transform:rotate(45deg);
        -ms-transform:rotate(45deg);
        transform:rotate(45deg);
    }

</style>
</html>